import logo from './logo.svg';
import './App.css';
import {useRef, useState} from 'react';
import {read, utils} from 'xlsx';
import SpreadSheet from 'x-data-spreadsheet'
import { stox } from './xlsxspread'

function App() {
  
  const [sheetHtml, setSheetHtml] = useState("");
  const tbl = useRef(null);


  useState(()=>{

    (async()=>{

      const queryStr = document.location.search;
      const search = new URLSearchParams(queryStr);
      const file = search.get("file")
      const f = await fetch(file);
      const ab = await f.arrayBuffer();
      const wb = read(ab);

      const ws = wb.Sheets[wb.SheetNames[0]];

      const html = utils.sheet_to_html(ws);

      const s = new SpreadSheet("#spread-sheet",{mode:"read",showBottomBar:false,showToolbar:false}).loadData(stox(wb))

      setSheetHtml(html);


    })();

  },[])

  return (
    <div className="App">
      {/* <div id="spread-sheet"/> */}
      <div ref={tbl} dangerouslySetInnerHTML={{__html:sheetHtml}}/>
    </div>
  );
}

export default App;
